<template>
  <div>
    <el-button @click="associatedRoom">关联房间设备</el-button>
    <el-button @click="associatedPublic">关联门禁</el-button>
    <div v-loading="loading" class="mt20">
      <TaiTitle title="已关联" class="mb20"></TaiTitle>
      <template v-if="list.length > 0">
        <div class="primary-section pv-12 ph-16" v-for="item in list" :key="item.id">
          <el-row align="middle">
            <el-col :span="16">
              <el-tag type="" effect="dark" v-if="item.deviceType === 1">门锁</el-tag>
              <el-tag type="info" effect="dark" v-if="item.deviceType === 2">电表</el-tag>
              <el-tag type="success" effect="dark" v-if="item.deviceType === 3">门禁</el-tag>
              <span v-if="item.deviceType === 1" class="font-w ml10">{{ item.lockName }}</span>
              <span v-if="item.deviceType === 2" class="font-w ml10">{{ item.name }}</span>
              <span v-if="item.deviceType === 3" class="font-w ml10">{{ item.faceLockName }}</span>
            </el-col>
            <el-col :span="8" align="right">
              <el-button link type="primary" @click="() => unbindDevice(item)">移除</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-empty v-else description="暂无关联设备" />
    </div>
    
    <!-- 门禁设备关联抽屉 -->
    <AssociateFaceLockDrawer 
      v-model="faceLockDrawerVisible" 
      :roomId="roomId" 
      @success="getList" 
      @closed="onFaceLockDrawerClosed"
    />
  </div>
</template>
<script setup name="DeviceList">
import { Search } from '@element-plus/icons-vue'
import RoomApi from "@/api/room/room.js";
import LockApi from "@/api/device/lock.js";
import EleMeterApi from "@/api/device/eleMeter.js";
import { unbindRoom } from "@/api/device/faceLock.js";
import AssociateFaceLockDrawer from './AssociateFaceLockDrawer.vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['refresh'])

const list = ref([])
const loading = ref(false)
const faceLockDrawerVisible = ref(false)

const props = defineProps({
  roomId: {
    type: [Number, String],
    default: ''
  },
})

// 关联房间设备
function associatedRoom() {
  emit('associatedRoom')
}

// 关联门禁设备
function associatedPublic() {
  if (!props.roomId || props.roomId === '') {
    proxy.$modal.msgError('请先选择房间')
    return
  }
  faceLockDrawerVisible.value = true
}

// 门禁抽屉关闭时触发
function onFaceLockDrawerClosed(hasChanges) {
  if (hasChanges) {
    // 通知父组件刷新房源列表
    emit('refresh')
  }
}

function unbindDevice(device) {
  if (device.deviceType === 1) {
    LockApi.unBind(device.lockId).then(res => {
      proxy.$modal.msgSuccess('操作成功')
      getList()
      emit('refresh') // 解绑后刷新外部列表
    })
  } else if (device.deviceType === 2) {
    EleMeterApi.unBind(device.electricityMeterId).then(res => {
      proxy.$modal.msgSuccess('操作成功')
      getList()
      emit('refresh') // 解绑后刷新外部列表
    })
  } else if (device.deviceType === 3) {
    unbindRoom(device.faceLockId, props.roomId).then(res => {
      proxy.$modal.msgSuccess('操作成功')
      getList()
      emit('refresh') // 解绑后刷新外部列表
    })
  }
}

/* 获取列表 */
function getList() {
  loading.value = true
  list.value = []
  if (!props.roomId || props.roomId === '') {
    loading.value = false
    return
  }
  RoomApi.getDeviceList(props.roomId).then(res => {
    list.value = res.data
    loading.value = false
  })
}

getList()
</script>
